<script>
import { normal_option } from "../common";
import Base from "./Base";

export default {
  name: "Funnel",
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          //图例
          type: "scroll", //可滚动的图例
          right: "10px", //图例组件离容器左侧的距离：靠左
          orient: "vertical", //图例列表的布局朝向：垂直
          top: "center", //图例组件离容器左侧的距离：居中
        },
        series: [
          {
            type: "funnel",
            left: "5%",
            right: "48%",
            top: "10%",
            bottom: "10%",
            minSize: "0%",
            maxSize: "100%",
            sort: "ascending",
            orient: "vertical",
            label: {
              show: false,
              position: "inside",
              formatter: function (params) {
                return params.name;
              },

              rich: {
                a: {
                  color: "rgba(222,240,255,1)",
                  fontSize: 30,
                },
                b: {
                  color: "rgba(101,166,196,1)",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 100,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  computed: {
    option: function () {
      let color =
        this.dataset.option && this.dataset.option.color
          ? this.dataset.option.color
          : [];

      this.defaultOption.series[0].data = this.dataset.source;

      let total = this.dataset.source.reduce((r, c) => {
        r += c.value;
        return r;
      }, 0);

      this.defaultOption.legend.formatter = (name) => {
        let item = this.dataset.source.find((f) => f.name === name);

        return (
          name +
          "   |   " +
          Math.round((item?.value === 0 ? 0 : item?.value / total) * 10000) /
            100 +
          "%" +
          "    " +
          item.value
        );
      };

      return {
        ...this.defaultOption,
        color,
      };
    },
  },
};
</script>
